import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Box,
    CircularProgress,
    Typography
} from '@mui/material';
import React, { useCallback } from 'react';
import { toast } from 'react-toastify';

import Member from '../../api/member/member';

const MembersTable = (props) => {
    const { pageLoading, items, error, loading, hasNextPage, sentryRef, editItem, deleteItem } =
        props;

    const getErrorMessage = useCallback(
        (error: { code: number; message: string }) => {
            return error.message;
        },
        [items]
    );

    const onEdit = (item: Member) => {
        editItem(item);
    };

    const onDelete = (item: Member) => {
        deleteItem(item);
    };

    const onCopyName = async (name: string, event: any) => {
        event.stopPropagation();
        await navigator.clipboard.writeText(name);
    };

    const onCopyMetaMaskAddress = async (address: string, event: any) => {
        event.stopPropagation();
        await navigator.clipboard.writeText(address);
        toast.success(`Copied to clipboard`, {
            theme: 'dark'
        });
    };

    const onCopyRoninWallet = async (address: string, event: any) => {
        event.stopPropagation();
        await navigator.clipboard.writeText(address);
        toast.success(`Copied to clipboard`, {
            theme: 'dark'
        });
    };

    return (
        <>
            {pageLoading ? (
                <Typography variant="h6" color="white">
                    Loading...
                </Typography>
            ) : (
                <Box sx={{ pb: 4 }}>
                    {!error ? (
                        <>
                            {items?.length > 0 && (
                                <Box
                                    sx={{
                                        background: '#0B0821',
                                        borderRadius: '12px',
                                        p: 5,
                                        pt: 2,
                                        pb: 2
                                    }}
                                >
                                    <Box className={'d-flex'} pl={2} pr={7}>
                                        <Box sx={{ flexGrow: 1, py: 2 }}>
                                            <Typography
                                                variant={'subtitle1'}
                                                sx={{ fontSize: 12, color: '#BCB6E9' }}
                                            >
                                                Name
                                            </Typography>
                                        </Box>
                                        <Box sx={{ width: '60%', py: 2 }}>
                                            <Typography
                                                variant={'subtitle1'}
                                                sx={{ fontSize: 12, color: '#BCB6E9' }}
                                                align={'center'}
                                            >
                                                Email address
                                            </Typography>
                                        </Box>
                                        {/* <Box sx={{ width: '15%', py: 2 }}>*/}
                                        {/*    <Typography*/}
                                        {/*        variant={'subtitle1'}*/}
                                        {/*        sx={{ fontSize: 12, color: '#BCB6E9' }}*/}
                                        {/*        align={'center'}*/}
                                        {/*    >*/}
                                        {/*        Earning Share*/}
                                        {/*    </Typography>*/}
                                        {/* </Box>*/}
                                        {/* <Box sx={{ width: '15%', py: 2 }}>*/}
                                        {/*    <Typography*/}
                                        {/*        variant={'subtitle1'}*/}
                                        {/*        sx={{ fontSize: 12, color: '#BCB6E9' }}*/}
                                        {/*        align={'center'}*/}
                                        {/*    >*/}
                                        {/*        Last Payout*/}
                                        {/*    </Typography>*/}
                                        {/* </Box>*/}
                                        {/* <Box sx={{ width: '15%', py: 2 }}>*/}
                                        {/*    <Typography*/}
                                        {/*        variant={'subtitle1'}*/}
                                        {/*        sx={{ fontSize: 12, color: '#BCB6E9' }}*/}
                                        {/*        align={'center'}*/}
                                        {/*    >*/}
                                        {/*        Next Payout*/}
                                        {/*    </Typography>*/}
                                        {/* </Box>*/}
                                    </Box>
                                    {items.map((row) => (
                                        <Accordion
                                            sx={{
                                                background: '#0F0D27',
                                                borderRadius: '12px',
                                                mb: 3
                                            }}
                                            key={row.id}
                                        >
                                            <AccordionSummary
                                                expandIcon={
                                                    <ArrowDropDownIcon
                                                        sx={{ fontSize: '2.5rem' }}
                                                    />
                                                }
                                                sx={{ background: '#13112A' }}
                                            >
                                                <Box
                                                    className={'d-flex align-items-center'}
                                                    sx={{ flexGrow: 1, py: 1 }}
                                                >
                                                    {row.name && (
                                                        <>
                                                            {/* <Box*/}
                                                            {/*    component="img"*/}
                                                            {/*    sx={{*/}
                                                            {/*        height: 50,*/}
                                                            {/*        width: 50,*/}
                                                            {/*        mr: 2,*/}
                                                            {/*    }}*/}
                                                            {/*    alt="Icon"*/}
                                                            {/*    src={'/girl_1.png'}*/}
                                                            {/* />*/}
                                                            <Typography>{row.name}</Typography>
                                                            <ContentCopyIcon
                                                                htmlColor="white"
                                                                sx={{ ml: 2, cursor: 'pointer' }}
                                                                onClick={(event) =>
                                                                    onCopyName(row.name, event)
                                                                }
                                                            />
                                                        </>
                                                    )}
                                                </Box>
                                                <Box
                                                    className={
                                                        'd-flex align-items-center justify-content-center'
                                                    }
                                                    sx={{ width: '60%', py: 1 }}
                                                >
                                                    <Typography variant={'h6'}>
                                                        {row.email}
                                                    </Typography>
                                                </Box>
                                                {/* <Box*/}
                                                {/*    className={*/}
                                                {/*        'd-flex align-items-center justify-content-center'*/}
                                                {/*    }*/}
                                                {/*    sx={{ width: '15%', py: 1 }}*/}
                                                {/* >*/}
                                                {/*    <Typography variant={'h6'}>50%</Typography>*/}
                                                {/* </Box>*/}
                                                {/* <Box*/}
                                                {/*    className={*/}
                                                {/*        'd-flex align-items-center justify-content-center'*/}
                                                {/*    }*/}
                                                {/*    sx={{ width: '15%', py: 1 }}*/}
                                                {/* >*/}
                                                {/*    <Typography variant={'h6'}>*/}
                                                {/*        2 days ago*/}
                                                {/*    </Typography>*/}
                                                {/* </Box>*/}
                                                {/* <Box*/}
                                                {/*    className={*/}
                                                {/*        'd-flex align-items-center justify-content-center'*/}
                                                {/*    }*/}
                                                {/*    sx={{ width: '15%', py: 1 }}*/}
                                                {/* >*/}
                                                {/*    <Typography variant={'h6'}>*/}
                                                {/*        in 5 days*/}
                                                {/*    </Typography>*/}
                                                {/* </Box>*/}
                                            </AccordionSummary>
                                            <AccordionDetails
                                                className={'d-flex'}
                                                sx={{ p: 2, py: 4 }}
                                            >
                                                <Box sx={{ width: '55%' }}>
                                                    <Typography
                                                        variant={'subtitle1'}
                                                        sx={{
                                                            fontSize: 12,
                                                            color: '#FFBB59',
                                                            pb: 2
                                                        }}
                                                        align={'center'}
                                                    >
                                                        Member Ronin Wallet Address (Receiving
                                                        Wallet)
                                                    </Typography>
                                                    <Box
                                                        className={
                                                            'd-flex align-items-center justify-content-center'
                                                        }
                                                    >
                                                        <Box
                                                            component="img"
                                                            sx={{
                                                                height: 24,
                                                                width: 24,
                                                                mr: 1
                                                            }}
                                                            alt="Icon"
                                                            src={'/ronin.png'}
                                                        />
                                                        <Typography
                                                            noWrap
                                                            variant={'subtitle1'}
                                                            sx={{ fontSize: 12, mr: 1, width: 100 }}
                                                        >
                                                            {row.memberRoninWalletAddress}
                                                        </Typography>
                                                        <ContentCopyIcon
                                                            htmlColor="white"
                                                            sx={{ cursor: 'pointer' }}
                                                            onClick={(event) =>
                                                                onCopyMetaMaskAddress(
                                                                    row.memberRoninWalletAddress,
                                                                    event
                                                                )
                                                            }
                                                        />
                                                    </Box>
                                                </Box>
                                                <Box sx={{ width: '40%' }}>
                                                    <Typography
                                                        variant={'subtitle1'}
                                                        sx={{
                                                            fontSize: 12,
                                                            color: '#FFBB59',
                                                            pb: 2
                                                        }}
                                                        align={'center'}
                                                    >
                                                        Manager Ronin Wallet Address
                                                    </Typography>
                                                    <Box
                                                        className={
                                                            'd-flex align-items-center justify-content-center'
                                                        }
                                                    >
                                                        <Box
                                                            component="img"
                                                            sx={{
                                                                height: 24,
                                                                width: 24,
                                                                mr: 1
                                                            }}
                                                            alt="Icon"
                                                            src={'/ronin.png'}
                                                        />
                                                        <Typography
                                                            noWrap
                                                            variant={'subtitle1'}
                                                            sx={{ fontSize: 12, mr: 1, width: 120 }}
                                                        >
                                                            {row.managerRoninWalletAddress}
                                                        </Typography>
                                                        <ContentCopyIcon
                                                            htmlColor="white"
                                                            sx={{ cursor: 'pointer' }}
                                                            onClick={(event) =>
                                                                onCopyRoninWallet(
                                                                    row.managerRoninWalletAddress,
                                                                    event
                                                                )
                                                            }
                                                        />
                                                    </Box>
                                                </Box>
                                                {/* <Box sx={{ width: '15%' }}>*/}
                                                {/*    <Typography*/}
                                                {/*        variant={'subtitle1'}*/}
                                                {/*        sx={{*/}
                                                {/*            fontSize: 12,*/}
                                                {/*            color: '#FFBB59',*/}
                                                {/*            pb: 2,*/}
                                                {/*        }}*/}
                                                {/*        align={'center'}*/}
                                                {/*    >*/}
                                                {/*        Fiat Wallet*/}
                                                {/*    </Typography>*/}
                                                {/*    <Box*/}
                                                {/*        className={*/}
                                                {/*            'd-flex align-items-center justify-content-center'*/}
                                                {/*        }*/}
                                                {/*    >*/}
                                                {/*        <Typography*/}
                                                {/*            variant={'subtitle1'}*/}
                                                {/*            sx={{ fontSize: 12, mr: 1 }}*/}
                                                {/*        >*/}
                                                {/*            Gcash*/}
                                                {/*        </Typography>*/}
                                                {/*        <Typography*/}
                                                {/*            variant={'subtitle1'}*/}
                                                {/*            sx={{ fontSize: 12 }}*/}
                                                {/*        >*/}
                                                {/*            097563328234*/}
                                                {/*        </Typography>*/}
                                                {/*    </Box>*/}
                                                {/* </Box>*/}
                                                <Box
                                                    sx={{ width: '15%' }}
                                                    className={
                                                        'd-flex align-items-center justify-content-center'
                                                    }
                                                >
                                                    <Box
                                                        sx={{
                                                            p: 1,
                                                            background: '#1F1D37',
                                                            mr: 1,
                                                            borderRadius: '8px'
                                                        }}
                                                    >
                                                        <EditIcon
                                                            onClick={() => onEdit(row)}
                                                            sx={{ cursor: 'pointer' }}
                                                        />
                                                    </Box>
                                                    <Box
                                                        sx={{
                                                            p: 1,
                                                            background: '#1F1D37',
                                                            borderRadius: '8px'
                                                        }}
                                                    >
                                                        <DeleteIcon
                                                            sx={{
                                                                cursor: 'pointer',
                                                                fill: '#FF015C'
                                                            }}
                                                            onClick={() => onDelete(row)}
                                                        />
                                                    </Box>
                                                </Box>
                                            </AccordionDetails>
                                        </Accordion>
                                    ))}
                                </Box>
                            )}
                            {!loading && (!items || !items.length) && (
                                <Typography className="text-white mt-4">
                                    No members yet...
                                </Typography>
                            )}
                            {sentryRef && (loading || hasNextPage) && (
                                <Box
                                    display="flex"
                                    justifyContent="center"
                                    alignItems="center"
                                    sx={{ pt: 4 }}
                                >
                                    <CircularProgress ref={sentryRef} sx={{ color: '#ffffff' }} />
                                </Box>
                            )}
                        </>
                    ) : error?.message ? (
                        <Typography className="mt-4" sx={{ color: 'var(--color-negative)' }}>
                            {getErrorMessage(error)}
                        </Typography>
                    ) : (
                        <Typography className="text-white mt-4">No members yet...</Typography>
                    )}
                </Box>
            )}
        </>
    );
};

export default MembersTable;
